<template>
  <NewCard>
    <div class="detail_main">
      <!-- 标题 -->
      <h2>
        <svg-icon icon-class="return_icon" class="returnIcon" @click="returnBtn"/>
        <b>{{ getType(orderinfo.type) }}</b>
        <span class="detail_title">{{ orderinfo.title }}</span>
        <!-- 标题悬浮框 -->
        <!-- <div slot="content" class="tooltip-div">
          <i></i>
          <p>
            {{ orderinfo.title }}
          </p>
        </div> -->
      </h2>

      <div v-if="orderinfo.goods" class="detail_content">
        <p class="detail_date">
          {{ orderinfo.goods.createTime }} · 
          {{ (orderinfo.goods.answers[0] && orderinfo.goods.answers[0].content.length) || 0 }}
          <span class="span">回答</span>
        </p>

        <div class="detail_source">
          <h3>问题</h3>
          <p>
            {{ orderinfo.goods.question }}
          </p>
        </div>

        <div class="detail_source questionList">
          <h3 v-if="orderinfo.goods.questionAppend">追问</h3>
          <ul>
            <li v-for="(questionItem, questionIndex) in orderinfo.goods.questionAppend" :key="questionIndex">
              <span class="question"
                >追问{{ turnChinese(questionIndex + 1) }} ：{{
                  questionItem
                }}</span>
            </li>
          </ul>
        </div>

        <div class="detail_source questionList" v-if="orderinfo.goods.files && orderinfo.goods.files.length>0">
          <h3>我上传的问题附件</h3>
          <ul>
            <li
              v-for="(fileItem, fileindex) in orderinfo.goods.files"
              :key="fileindex"
            >
              <i class="el-icon-document"></i>
              <p>
                <a :href="fileItem">{{fileItem.substring(fileItem.lastIndexOf("/") + 1)}}</a>
              </p>
            </li>
          </ul>
        </div>

        <!-- 专家回答 -->
        <template v-if="orderinfo.goods.answers && orderinfo.goods.answers.length > 0">
          <div
            v-for="answerItem in orderinfo.goods.answers"
            :key="answerItem.id"
            class="expertReplies"
          >
            <template v-if="answerItem.content">
              <div
                v-for="textItem in answerItem.content"
                :key="textItem.id"
                class="detail_txt"
              >
                <div class="expertRepInfo">
                  <img :src="answerItem.avatar" alt="" />
                  <p>
                    {{ answerItem.expertName }}
                  </p>
                  <span> {{ textItem.createTime }}</span>
                </div>
                <div>
                  {{ textItem.answer }}
                  <div class="detail_quote">
                    <ul>
                      <li
                        v-for="(lawItem, lawIndex) in textItem.law"
                        :key="lawIndex"
                      >
                        <h3>
                          {{ lawItem.title }}
                        </h3>
                        <p
                          v-for="(lawItemContent, index) in lawItem.content"
                          :key="index"
                        >
                          {{ lawItemContent }}
                        </p>
                      </li>
                      <!-- 专家回答的附件 -->
                      <!-- <li
                        v-for="(fileItem, fileIndex) in textItem.file"
                        :key="fileIndex"
                      >
                        <div class="fileList">
                          <a :href="fileItem.url">{{ fileItem.name }}</a>
                        </div>
                      </li> -->
                      <div class="accessory">
                        <ul>
                          <!-- <li>{{item.content[0].file}}</li> -->
                          <li v-for="(file, index) in textItem.file" :key="index">
                            <a :href="file.url">
                              <span class="el-icon-document">
                                附件：{{ file.name }}</span
                              >
                              <svg-icon icon-class="download" />
                            </a>
                          </li>
                        </ul>
                      </div>
                    </ul>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </template>
        <!-- 没有专家回复的时候 空状态 -->
        <el-empty description="暂无专家回复" :image-size="100" v-else></el-empty>

      
      </div>
    </div>
    <div class="ribbon_content">
      <Ribbon
        ref="Ribbon"
        :detail="orderinfo"
        :listActive="orderinfo.type"
        :isAdvisoryDetail="isAdvisoryDetail"
      ></Ribbon>
    </div>
  </NewCard>
</template>

<script>
import { TurnChinese } from "@/wss/utils/wss.js";
import NewCard from "@/wss/components/newCard.vue";
import Ribbon from "@/BMViews/views/userCenter/homepage/ribbon.vue";
export default {
  name: "DetailBought",
  props: {
    orderinfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    orderinfo: {
      handler(val) {
        this.$refs.Ribbon.getTime(val);
      },
      deep: true,
    },
  },
  created() {
    console.log(this.orderinfo.goods.answers);
  },
  components: { NewCard, Ribbon },
  computed: {
    getType() {
      return (type) => {
        // 1 法律 2 问答 3 头条 4 合同 5 咨询
        if (type == 1) {
          return "法律";
        } else if (type == 2) {
          return "问答";
        } else if (type == 3) {
          return "头条";
        } else if (type == 4) {
          return "合同";
        } else if (type == 5) {
          return "咨询";
        }
      };
    },
  },
  data() {
    return {
      turnChinese: TurnChinese,
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", //头像
      isAdvisoryDetail: true, //当前是咨询的详情
    };
  },
  methods:{
    // 返回
    returnBtn(){
      this.$bus.$emit('returnBtnShow',0)
    },
  },
};
</script>

<style scoped>
::v-deep .top {
  display: none;
}
::v-deep .el-card__body > div {
  height: 100% !important;
  overflow-y: inherit !important;
  position: relative;
}
ul,
p,
h3 {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 标题 */
.detail_main {
  height: 100%;
  padding: 0 30px;
}
.detail_main h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #efefef;
  padding-top: 5px;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.detail_main h2 > svg{
  cursor: pointer;
  margin-right: 5px;
}
.detail_main h2 > b {
  display: inline-block;
  width: 60px;
  background-color: #747474;
  color: #fff;
  font-size: 14px;
  text-align: center;
  font-weight: 400;
  padding: 4px 15px;
  line-height: 20px;
  border-radius: 15px;
  margin-right: 16px;
}
.detail_main h2 > .detail_title {
  flex: 1;
  font-size: 16px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  /* white-space: nowrap; */
  /* 多行溢出隐藏 */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.detail_main h2 .tooltip-div {
  display: none;
  width: 100%;
  position: absolute;
  background-color: rgba(125, 124, 124, 0.8);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  border-radius: 20px;
  top: 30px;
  left: 0;
  z-index: 100;
  padding: 10px;
  margin-left: 20px;
}
.detail_main h2:hover .tooltip-div {
  display: inline-block;
}
/* 内容区 */
.detail_content {
  height: 86%;
  overflow-y: auto;
  overflow-x: initial;
}
/* 时间 */
.detail_date {
  margin: 0;
  line-height: 18px;
  font-size: 12px;
  color: #bbb;
  margin-bottom: 30px;
}
.span {
  font-size: 8px;
}
/* 来源 */
.detail_source {
  margin-bottom: 30px;
}
.detail_source h3 {
  font-size: 12px;
  color: #222;
  font-weight: bold;
  margin-bottom: 15px;
}
.detail_source>p{
  color: #656669;
  font-size: 14px;
}
.detail_source ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #656669;
  font-size: 14px;
}
.detail_source ul > li {
  display: flex;
  line-height: 24px;
}
.questionList ul > li {
  margin-bottom: 10px;
}
.detail_source ul > li i {
  margin-right: 16px;
  margin-top: 5px;
}
.detail_source ul > li p {
  flex-grow: 1;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #efefef;
}

/* 专家回答区域 */
.expertRepInfo {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 15px;
}
.expertRepInfo > img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  object-fit: cover;
  margin-right: 15px;
}
.expertRepInfo > p {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  margin-right: 5px;
}
.expertRepInfo > span {
  font-size: 12px;
  color: #999;
  margin-left: 5px;
}
.detail_txt {
  font-size: 14px;
  line-height: 26px;
  color: #333;
}
.detail_txt > p {
  margin-bottom: 20px;
}

.detail_quote{
  margin-top: 10px;
}
.detail_quote > ul > li {
  background-color: #f6f7fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
}
.detail_quote > ul > li h3 {
  color: #768097;
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 10px;
}
.detail_quote > ul > li p {
  color: #768097;
  font-size: 14px;
  line-height: 26px;
  /* text-indent: 18px; */
}

/* 附件 */
.accessory ul {
  padding: 0;
  margin-bottom: 30px;
}
.accessory ul > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
  border: 1px solid #efefef;
  border-radius: 8px;
}
.accessory ul > li svg {
  cursor: pointer;
  font-size: 20px;
}
/* 专家回答区域 end*/


/* 功能区 */
.ribbon_content {
  position: absolute;
  left: -30px;
  bottom: -30px;
  width: calc(100% + 60px);
  background-color: #fff;
  border-top: 1px solid #ecedf0;
  padding: 0 30px;
}
.question {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
}

.accessory ul {
  padding: 0;
}
.accessory ul > li {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #666;
  border: 1px solid #efefef;
  border-radius: 8px;
}
.accessory ul > li > a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.accessory ul > li svg {
  cursor: pointer;
  font-size: 16px;
}
</style>
